<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>选项卡</title>
    <style>
       section{
           width: 500px;
           margin: 0 auto;
           border: 1px solid black;
           /*position: relative;*/
       }
       
       ul{
           list-style: none;
           background-color: black;
           width: 460px;
           height: 30px;
           line-height: 30px;
           margin: 0;
       }
       ul li{
           display: inline-block;
           color: white;
           margin-right: 10px;
           font-size: 15px;
           cursor: pointer;
           width: 100px;
           text-align: center;
           margin: 0;
       }
       .selected{
           background-color: lightgray;
       }
       p{
           display: block;
           width: 100px;
           /*height: 150px;*/
           /*border: 1px solid black;*/
           position: relative;
           left: 200px;
          
       } 
       .hide{
        display:none;
       }
    </style>
</head>
<body>
    <section>
        <ul>
            <li class="selected">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
        <div class="contentP">
            <p>
            内容一<br>
            内容一<br>
            内容一<br>
            内容一
         </p>
         <p class="hide">
            内容二<br>
            内容二<br>
            内容二
         </p>
         <p class="hide">
            内容三<br>
            内容三<br>
            内容三<br>
            内容三<br>
            内容三<br>
            内容三
         </p>
        </div>
        
    </section>
        
   
</body>
</html>
<script>
//    通过添加 和删除类名的方法来实现需求
   $('li').mouseover(function(){
    // 设置li标签选择效果
     $(this).addClass('selected').siblings().removeClass('selected');
     
    //  获取li标签内部文字
     var text=$(this).text();
    //  根据li标签内部文字 来找到对应内容的p标签  
     if(text=='选项一'){
        //  找到p中包含内容一的p标签，让其显示 其他的兄弟元素隐藏
         $('.contentP p:contains("内容一")').removeClass('hide').siblings().addClass('hide');
     }
     if(text=='选项二'){
         $('.contentP p:contains("内容二")').removeClass('hide').siblings().addClass('hide');
     }
     if(text=='选项三'){
         $('.contentP p:contains("内容三")').removeClass('hide').siblings().addClass('hide');
     }

   });



</script>

